<template>
  <div class="role">
    <p class="title">
      <i class="el-icon-s-fold"></i>角色管理
      <i class="el-icon-refresh-right shua"></i>
    </p>
    <div class="top">
      <div class="left">
        <div class="zhuangtai">
          <p>状态</p>
          <div class="layui-input-block timo-search-status">
            <select class="timo-search-select" name="status">
              <option value="1" selected="selected">正常</option>
              <option value="2">冻结</option>
            </select>
          </div>
        </div>
        <div class="layui">
          <p>编号</p>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              value=""
              placeholder="请输入角色编号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui">
          <p>名称</p>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              value=""
              placeholder="请输入名称编号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <button class="btn timo-search-btn">
          <i class="el-icon-zoom-in"></i>
        </button>
      </div>
      <div class="right">
        <ul class="right-list">
          <li @click="addfn(1)">
            <i class="el-icon-plus"></i>
            添加
          </li>
          <li>操作</li>
        </ul>
      </div>
    </div>
    <el-table :data="arrs" border style="width: 100%" height="500">
      <el-table-column fixed width="50">
        <input type="checkbox" v-model="checked" />
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="70">
      </el-table-column>
      <el-table-column prop="usernick" label="用户昵称" width="120">
      </el-table-column>
      <el-table-column prop="depart" label="所在部门" width="80">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="50"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="140"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
      <el-table-column prop="time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="170">
        <template slot-scope="scope">
          <el-button @click="fn(scope)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small">详细</el-button>
          <el-button type="text" size="small" @click="deleteHomeIndex(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹框 -->
    <el-dialog
      :title="i == 1 ? '添加用户' : '编辑用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input
            v-model="form.usernick"
            autocomplete="off"
            placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.pw1"
            autocomplete="off"
            placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.pw2"
            autocomplete="off"
            placeholder="再一次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在部门" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择所在部门">
            <el-option label="技术部门" value="shanghai"></el-option>
            <el-option label="测试部门" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input
            v-model="form.tel"
            autocomplete="off"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input
            v-model="form.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.text"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fnsure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import instance from "../../api/index";
export default {
  name: "Role",
  data() {
    return {
      checked: false,
      options: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "冻结",
        },
      ],
      value: "",
       checked: false,
      arrs: null,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      i: 0,
      formInline: {
        user: "",
        region: "",
        id: "",},
         tableData: [
        {
          username: "",
          usernick: "",
          depart: "",
          sex: "",
          tel: "",
          email: "",
          time: "",
          state: "",
        },
      ],
      form: {
        id: "",
        username: "",
        usernick: "",
        region: "",
        tel: "",
        email: "",
        sex: "",
        text: "",
      },
    }
  },
 methods: {
    async getData() {
      let { data } = await instance.get("/role");
      console.log(data);
      this.arrs = data.list;
    },
    //添加
    addfn(i) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.form.username = "";
      this.form.usernick = "";
      this.i = i;
    },
    // 编辑事件
    fn(row) {
      console.log(row.row.username);
      this.form.username = row.row.username;
      this.form.usernick = row.row.usernick;
      this.form.id = row.row.id;
      this.dialogFormVisible = !this.dialogFormVisible;
      console.log(111);
      this.i = 0;
    },
    // 删除事件
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteHomeIndex(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 确定
    fnsure() {
      this.dialogFormVisible = false;
      if (this.i == 1) return this.handleAdd();
      this.editHomeIndex();
    },
    //  添加业务
    async handleAdd() {
      // let name = this.form.username;
      // let text = this.form.usernick;
      let { data } = await instance.post("/role", this.form);
      console.log(data);
      this.i = 1;
      this.getData();
    },
    // 编辑业务
    async editHomeIndex() {
      // let name = this.form.username;
      // let text = this.form.usernick;
      let id = this.form.id;
      console.log(id);
      let { data } = await instance.put("/role/edit/" + id, this.form);
      console.log(data);

      this.getData();
    },
    // 删除业务
    async deleteHomeIndex(index) {
      let { data } = await instance.delete("/role/delete/0" + index.$index);
      console.log(data);
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.top_list {
  display: flex;
  margin-left: 10px;
}
.top_list li {
  border: 2px solid #dee2e6;
  padding: 12px 18px 12px 12px;
  text-align: left;
  line-height: 20px;
  font-weight: bold;
  border-right: none;
}
.top_list li:last-child {
  border-right: 2px solid #dee2e6;
}
.top_list li:nth-child(1) {
  width: 15px;
}
.top_list li:nth-child(2) {
  width: 120px;
}
.top_list li:nth-child(3) {
  width: 120px;
}
.top_list li:nth-child(4) {
  width: 210px;
}
.top_list li:nth-child(5) {
  width: 210px;
}
.top_list li:nth-child(6) {
  width: 150px;
}
.top_list li:nth-child(7) {
  width: 190px;
}
.right .right-list {
  display: flex;
}
.right .right-list li {
  width: 70px;
  height: 38px;
  background: #009688;
  margin-left: 10px;
  color: #fff;
  line-height: 38px;
  text-align: center;
}
.right .right-list li i {
  font-weight: bold;
  font-size: 18px;
}
.role {
  background: #fff;
}
.role .title .shua {
  margin-left: 1120px;
  font-size: 20px;
  font-weight: 600;
}
.role .title {
  width: 97%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border-top: 4px solid #d2d2d2;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 20px;
}
.role .top {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: 15px;
}
.role .top .left {
  width: 67%;
  height: 48px;
  display: flex;
  /* background: pink; */
}
.role .top .left .btn {
  width: 49px;
  height: 40px;
  background: #009688;
  border: 0;
  /* margin-left: 10px; */
}
.role .top .left .btn i {
  font-size: 20px;
  color: #fff;
}
.role .top .left .zhuangtai {
  width: 20%;
  display: flex;
}
.role .top .left .layui {
  width: 30%;
  display: flex;
  margin-left: 20px;
}
.role .top .left .layui p {
  width: 60px;
  height: 38px;
  border: 1px solid #009688;
  color: #009688;
  line-height: 38px;
  text-align: center;
  font-weight: bold;
}
.role .top .left .zhuangtai p {
  width: 60px;
  height: 38px;
  border: 1px solid #009688;
  color: #009688;
  line-height: 38px;
  text-align: center;
  font-weight: bold;
}
.role .top .left .layui .layui-input {
  width: 180px;
  height: 38px;
  border: 1px solid #009688;
  line-height: 38px;
  text-align: center;
  border-left: 0;
  outline: none;
}
.role .top .left .zhuangtai .timo-search-select {
  width: 70px;
  height: 40px;
  border: 1px solid #009688;
  line-height: 40px;
  text-align: center;
  border-left: 0;
  font-weight: bold;
}
</style>